.root {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;

  display: flex;
  justify-content: center;

  height: 65px;

  background-color: var(--color-dark-700);
  border-bottom: 1px solid var(--color-dark-500);

  .logo {
    cursor: pointer;
    display: flex;

    > svg {
      transition: 0.3s;

      &:hover {
        filter: drop-shadow(0 0 6px var(--color-accent-100));
      }
    }
  }

  @media screen and (width <= 576px) {
    height: 85px;
  }
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: 1140px;
  height: 100%;
  margin-right: 1rem;
  margin-left: 1rem;

  .userInfo {
    display: flex;
    flex-direction: row;
    gap: 0;
    column-gap: 14px;
    align-items: center;

    .userName {
      text-decoration: none;
      outline: none;
      transition: 0.3s;

      &:hover {
        cursor: pointer;
        color: var(--color-accent-100);
        border-bottom-color: var(--color-accent-100);
      }

      &:active {
        color: var(--color-accent-300);
        border-bottom-color: var(--color-accent-300);
      }

      &:focus-visible {
        color: var(--color-info-300);
        border-bottom-color: var(--color-info-300);
      }
    }
  }
}

.userPhoto {
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.loginButton {
  display: flex;
  gap: 10px;
}

.loginData {
  display: flex;
  gap: 10px;
  align-items: center;

  .langSelect {
    background-color: var(--color-dark-700);
  }

  @media screen and (width <= 576px) {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
}
